<script setup>
import NavItem from '../NavItem/index.vue';
import { Icon } from '@iconify/vue';
const props = defineProps({ item: Object, level: Number });

// 判断是否为MDI图标
const isMdiIcon = (icon) => {
    return icon && icon.startsWith('mdi-');
};
</script>

<template>
    <!-- ---------------------------------------------- -->
    <!---Item Childern -->
    <!-- ---------------------------------------------- -->
    <v-list-group no-action>
        <!-- ---------------------------------------------- -->
        <!---Dropdown  -->
        <!-- ---------------------------------------------- -->
        <template v-slot:activator="{ props }">
            <v-list-item v-bind="props" :value="item.title" rounded class="mb-1 nav-collapse-custom">
                <!---Icon  -->
                <template v-slot:prepend>
                    <!-- MDI图标 -->
                    <v-icon v-if="isMdiIcon(item.icon)" :icon="item.icon" size="18"
                        :class="'text-' + item.BgColor"></v-icon>
                    <!-- Solar图标 -->
                    <Icon v-else :icon="'solar:' + item.icon" height="18" width="18" :level="level" class="dot"
                        :class="'text-' + item.BgColor" />
                </template>
                <!---Title  -->
                <v-list-item-title class="mr-auto">{{ $t(item.title) }}</v-list-item-title>
                <!---If Caption-->
                <v-list-item-subtitle v-if="item.subCaption" class="text-caption mt-n1 hide-menu">
                    {{ item.subCaption }}
                </v-list-item-subtitle>
            </v-list-item>
        </template>
        <!-- ---------------------------------------------- -->
        <!---Sub Item-->
        <!-- ---------------------------------------------- -->
        <template v-for="(subitem, i) in item.children" :key="i" v-if="item.children">
            <NavCollapse :item="subitem" v-if="subitem.children" :level="level + 1" />
            <NavItem :item="subitem" :level="level + 1" v-else></NavItem>
        </template>
    </v-list-group>

    <!-- ---------------------------------------------- -->
    <!---End Item Sub Header -->
    <!-- ---------------------------------------------- -->
</template>

<style scoped>
.nav-collapse-custom :deep(.v-list-item__spacer) {
    display: none !important;
}
</style>
